<template>
  <div>
    <header-area />

    <div class="detail">
      <!-- <span class="demonstration">自定义</span> -->
      <div class="detial-first">

        <av-waveform  class="detail-picture"
        playtime-line-color="#ff0052"
        playtime-line-width="0.8"
        v-if="nft.type=='audio'"
        :audio-src="getAudioSource()"
        ></av-waveform>

        <el-image
          class="detail-picture"
          v-if="nft.type == 'picture'"
          :src="nft.content_url"
          fit="cover">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <el-image
          class="detail-picture"
          v-if="nft.type == '盲盒'"
          :src="nft.content_url"
          fit="cover"
        >
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <div v-if="nft.type == 'video'" class="detail-content-box">
          <video-player :playsinline="true" :options="getPlayerOptions()">
          </video-player>
        </div>
        <el-card class="description-card">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="描述 Description" name="1">
              <template slot="title">
                描述 Description <i class="el-icon-document"></i>
              </template>
              <el-empty
                v-if="!nft.description"
                description="暂时为空"
              ></el-empty>
              <div v-else>{{ nft.description }}</div>
            </el-collapse-item>
          </el-collapse>
        </el-card>


      </div>

      <div class="detail-box">
        <div style="font-size: 20px">{{ nft.collection }}</div>
        <!-- 
        <a :herf="nft.origin_link" style="font-size: 26px">
          {{ nft.name }}
        </a> -->

        <el-link
          :herf="nft.origin_link"
          style="font-size: 30px"
          target="_blank"
          >{{ nft.name }}</el-link
        >

        <div style="font-size: 22px">发行总量：{{ nft.amount }}</div>

        <div style="font-size: 20px">
          所属平台：{{ nft.platform }}
          <el-tag size="small" v-if="this.platform_level == '低风险平台'">{{
            this.platform_level
          }}</el-tag>
          <el-tag
            size="small"
            v-if="this.platform_level == '中风险平台'"
            type="warning"
            >{{ this.platform_level }}</el-tag
          >
          <el-tag
            size="small"
            v-if="this.platform_level == '高风险平台'"
            type="danger"
            >{{ this.platform_level }}</el-tag
          >
        </div>
        <div style="font-size: 20px">发行日期：{{ nft.date }}</div>
        <div class="detail-price">
          <div style="font-size: 16px; color: #707a83">价格：</div>
          <div style="font-size: 30px; margin-left: 30px">
            {{ nft.price > 0 ? nft.price : "无价之宝" }}
          </div>
          <!-- <i class="icons icon-ETH"></i> -->
        </div>
        <div class="detail-tags">
          <el-tag
            v-for="(item, index) in nft.risks"
            :key="index"
            effect="dark"
            :closable="isEditable"
            @close="handleClose(item)"
            :type="item.type"
            >{{ item.risk_name }}</el-tag
          >

          <el-cascader
            ref="cascader"
            v-if="isEditable"
            :options="options"
            :show-all-levels="false"
            :label="addValue"
            @change="addTag"
            placeholder="+ New Tag"
            size="mini"
          ></el-cascader>
          <!-- <el-cascader v-if="inputVisible" ref="cascader"
              :options="options" :show-all-levels="false" :label="addValue" @change="addTag" placeholder="+ New Tag" size = "mini"></el-cascader>
              
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button> -->
        </div>

        <el-card class="box-card" style="margin-bottom: 20px">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="链上信息 Details" name="2">
              <el-descriptions
                class="margin-top"
                :column="1"
                :size="size"
                border
              >
                <el-descriptions-item>
                  <template slot="label"> 合约地址 </template>
                  <el-link
                    v-if="nft.contract_address_link"
                    :href="nft.contract_address_link"
                    target="_blank"
                    type="primary"
                    >{{ nft.contract_address }}</el-link
                  >
                  <span v-else>{{ nft.contract_address }} </span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 链上标识 </template>
                  {{ nft.token_id }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> Token Standard </template>
                  {{ nft.token_std }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 所在区块链 </template>
                  {{ nft.blockchain }}
                </el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderArea from "../components/HeaderArea.vue";
import "../assets/css/icons/iconfont.js";
export default {
  components: { 
    HeaderArea ,
    // VuetifyAudio: () => import('vuetify-audio'),
  },

  data() {
    return {
      id: 1405,
      // total:null,
      // risk_num:null,

      nft: {
        // collection: "收藏集1",
        // name: "#101",
        // author: "velit",
        // date: "2012-06-12",
        // amount: 31,
        // type: "pic",
        // platform: "exercitation",
        // blockchain: "Ethereum",
        // price: 45,
        // contract_address: "0xfc8a...6864",
        // token_id: "87",
        // token_std: "ERC-721",
        // content_url:
        //   "https://img.seadn.io/files/46650f1c78b9fd062cff7c5a4c422024.png",
        // id: 32,
        // description:
        //   "Alek's crowning achievement was creating the first US Mercenary Extraction Force in 2040, topping a career of military excellence. His elite skills, nerves of steel, and historical insight would later help a diverse and unlikely team to survive and extract from the Zone.",
        // risks: [
        //   {
        //     risk_probability: 46,
        //     risk_id: "1",
        //     risk_name: "政治风险",
        //   },
        //   {
        //     risk_probability: 66,
        //     risk_id: "2",
        //     risk_name: "涉黄风险",
        //   },
        // ],
      },
      isEditable: true,
      platform_level: null,
      // inputVisible:false,
      addValue: null,
      activeNames: ["2"],
      options: [
        //选项卡
        {
          value: 2,
          label: "涉政风险",
          children: [
            {
              value: "3000",
              label: "一级涉政",
            },
            {
              value: "6000",
              label: "二级涉政",
            },
            {
              value: "9000",
              label: "三级涉政",
            },
          ],
        },
        {
          value: 1,
          label: "涉黄风险",
          children: [
            {
              value: "3000",
              label: "一级涉黄",
            },
            {
              value: "6000",
              label: "二级涉黄",
            },
            {
              value: "9000",
              label: "三级涉黄",
            },
          ],
        },
        {
          value: 3,
          label: "舆论风险",
          children: [
            {
              value: "3000",
              label: "一级舆论",
            },
            {
              value: "6000",
              label: "二级舆论",
            },
            {
              value: "9000",
              label: "三级舆论",
            },
          ],
        },
        {
          value: 4,
          label: "暴力风险",
          children: [
            {
              value: "3000",
              label: "一级暴力",
            },
            {
              value: "6000",
              label: "二级暴力",
            },
            {
              value: "9000",
              label: "三级暴力",
            },
          ],
        },
        {
          value: 5,
          label: "恐怖风险",
          children: [
            {
              value: "3000",
              label: "一级恐怖",
            },
            {
              value: "6000",
              label: "二级恐怖",
            },
            {
              value: "9000",
              label: "三级恐怖",
            },
          ],
        },
        {
          value: 6,
          label: "潜在风险",
          children: [
            {
              value: "3000",
              label: "一级潜在",
            },
            {
              value: "6000",
              label: "二级潜在",
            },
            {
              value: "9000",
              label: "三级潜在",
            },
          ],
        },
      ],
      playerOptions: {
        // videojs options
        fluid: true, //自调整比例适应容器
        autoplay: true, // 如果为true,浏览器准备好时开始回放。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        loop: true,
        language: "zh-CN",
        muted: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            src: "https://d2iccaf7eutw5f.cloudfront.net/0xCf9928e1d45F47Cb35FB7a35b8024f9AE3075AeD/27/large",
          },
        ],
        controls: true,
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
        // poster: "/static/images/author.jpg",
      },
    };
  },

  computed: {},
  watch: {},

  methods: {
    getPlayerOptions(){
      const playerOptions= {
        // videojs options
        fluid: true, //自调整比例适应容器
        autoplay: true, // 如果为true,浏览器准备好时开始回放。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        loop: true,
        language: "zh-CN",
        muted: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            src: "https://d2iccaf7eutw5f.cloudfront.net/0xCf9928e1d45F47Cb35FB7a35b8024f9AE3075AeD/27/large",
          },
        ],
        controls: true,
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
        // poster: "/static/images/author.jpg",
      }
      const videoUrl = this.nft.content_url;
      if (videoUrl) {
        playerOptions.sources[0].src = videoUrl;
      } 
      // else {
      //   this.nft.content_url =
      //     "https://gw.alicdn.com/imgextra/i3/O1CN01DKaORe1dcIHH0eMRx_!!6000000003756-55-tps-164-142.svg";
      //   this.nft.type = "picture";
      // }
      return playerOptions;
    },

    getAudioSource(){

      return this.nft.content_url
    },

    getPlatformLevel() {
      var total = null;
      var risk_num = null;
      this.$api.nft
        .getNftList({
          platform: this.nft.platform,
        })
        .then((res) => {
          total = res.sum;

          this.$api.nft
            .getRiskDistribution({
              // platform:this.nft.platform
            })
            .then((res) => {
              for (var i in res.results) {
                if (res.results[i].platform == this.nft.platform) {
                  risk_num = res.results[i].num;
                }
              }

              var tmp = risk_num / total;
              if (tmp < 0.01) {
                this.platform_level = "低风险平台";
              } else if (tmp < 0.05) {
                this.platform_level = "中风险平台";
              } else {
                this.platform_level = "高风险平台";
              }
            });
        });
    },

    risk2string(risk) {
      let tmp = "";
      if (risk.risk_probability >= 9000) {
        tmp = tmp + "三级";
        risk.type = "danger";
      } else if (risk.risk_probability >= 6000) {
        tmp = tmp + "二级";
        risk["type"] = "warning";
      } else {
        tmp = tmp + "一级";
      }

      switch (risk.risk_id) {
        case 1:
          return tmp + "色情";
        case 2:
          return tmp + "舆论";
        case 3:
          return tmp + "政治";
        case 4:
          return tmp + "暴力";
        case 5:
          return tmp + "恐怖";
        case 6:
          return tmp + "潜在";
      }
    },

    handleClose(tag) {
      console.log("del:", tag);
      this.nft.risks.splice(this.nft.risks.indexOf(tag), 1);

      let formData = new FormData();
      formData.append("nft_id", this.id);
      formData.append("risk_id", tag.risk_id);

      this.$api.nft.delTagRisk(formData).then((res) => {
        console.log("res ", res);
      });
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.cascader.focus();
      });
    },
    addTag(e) {
      let node = this.$refs.cascader.getCheckedNodes();
      let tag = {
        risk_id: e[0],
        risk_probability: e[1],
      };
      tag.risk_name = this.risk2string(tag);
      this.inputVisible = false;
      this.inputValue = "";
      let formData = new FormData();
      formData.append("nft_id", this.id);
      formData.append("risk_id", tag.risk_id);
      formData.append("risk_probability", tag.risk_probability);
      // console.log("ggg");
      this.$api.nft.tagRisk(formData).then((res) => {
        if (tag) {
          this.nft.risks.push(tag);
        }
        console.log("res ", res);
      });
    },
  },
  created() {
    let id = this.$route.query.id;
    console.log("传参id", id);
    if (id) {
      this.id = id;
    }
  },

  mounted() {
    // this.$http.get('riskList').then((response)=>{
    //   if(response.data.error =="0" ){
    //     let res = response.data.result
    //   }
    // })

    /* this.$http
      .get("/nftDetail", {
        params: {
          id: this.id,
        },
      })
      .then((response) => {
        let nft = response.data.result;
        this.nft = nft;
      }); */
    const id = this.id;
    this.$api.nft.getDetail({ id: id }).then((res) => {
      console.log("res", res);
      this.nft = res.result;
      for (var index in this.nft.risks) {
        this.nft.risks[index].risk_name = this.risk2string(
          this.nft.risks[index]
        );
        console.log("11");
      }
      this.playerOptions.sources.src = this.nft.content_url;
      this.getPlatformLevel();
    });
  },
};
</script>

<style lang='less' scoped>
.detail {
  width: 100%;
  height: 100%;
  // padding: 16px;
  display: flex;
  // justify-content: center;
  // text-align: center
}
.detail-box {
  width: 500px;
  height: 600px;
  margin-left: 0px;
  margin-top: 30px;
  line-height: 50px;
}
.detail-tags {
  display: flex;
  // // flex-direction: column;
  // justify-content: center;
}

.box-card {
  border-radius: 10px;
  margin-top: 30px;
}
.el-tag {
  margin-right: 10px;
}
.detail-content-box {
  width: 500px;
  height: 500px;
  // max-width: 500px;
  // max-height: 500px;
  border-radius: 10px;
  margin-top: 30px;
  margin-left: 200px;
  margin-right: 30px;
  // padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.detail-picture {
  // width: 500px;
  // height: 500px;
  max-width: 500px;
  max-height: 700px;
  border-radius: 10px;
  margin-top: 30px;
  margin-left: 200px;
  margin-right: 30px;
  // padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.description-card {
  max-width: 500px;
  border-radius: 10px;
  margin-left: 200px;
  margin-right: 30px;
  margin-top: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.detail-price {
  line-height: 30px;
  display: flex;
  // margin-block: ;
  margin-bottom: 20px;
}
</style>